<template>
  <!-- 文章标签 Begin -->
  <div class="m-b-40px">
    <div class="row-title flex flex-items-center flex-justify-center w-100%">
      <div
        class="col-title capitalize text-center text-18px text-#000 dark:text-#D8D8D8 font-700 tracking-1px"
        style="font-family: 'Open Sans', sans-serif"
      >
        Tags
      </div>
    </div>
    <div class="flex flex-wrap max-h-135px overflow-y-scroll">
      <div
        v-if="tagList.length > 0"
        v-for="item in tagList"
        :key="item.tagId"
        class="m-r-3px m-b-3px p-y-5px p-x-10px border-1px border-[--el-color-primary] border-solid rounded-full text-#000 dark:text-#D8D8D8 text-12px hover:text-[--el-color-primary] font-400 tracking-1px line-height-12px transition-all duration-600 transition-ease"
        style="font-family: 'Muli', sans-serif"
        @click="handleArticleTag(item.tagId)"
      >
        {{ item.tagName }}
      </div>
      <!-- 骨架屏 Begin -->
      <div class="w-100%" v-else>
        <el-skeleton animated>
          <template #template>
            <el-row>
              <el-col :span="6" class="m-r-3px">
                <el-skeleton-item class="rounded-full w-100% h-20px" />
              </el-col>
              <el-col :span="6" class="m-r-3px">
                <el-skeleton-item class="rounded-full w-100% h-20px" />
              </el-col>
              <el-col :span="6" class="m-r-3px">
                <el-skeleton-item class="rounded-full w-100% h-20px" />
              </el-col>
              <el-col :span="5">
                <el-skeleton-item class="rounded-full w-100% h-20px" />
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8" class="m-r-3px">
                <el-skeleton-item class="rounded-full w-100% h-20px" />
              </el-col>
              <el-col :span="6" class="m-r-3px">
                <el-skeleton-item class="rounded-full w-100% h-20px" />
              </el-col>
              <el-col :span="4" class="m-r-3px">
                <el-skeleton-item class="rounded-full w-100% h-20px" />
              </el-col>
              <el-col :span="5">
                <el-skeleton-item class="rounded-full w-100% h-20px" />
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="5" class="m-r-3px">
                <el-skeleton-item class="rounded-full w-100% h-20px" />
              </el-col>
              <el-col :span="9" class="m-r-3px">
                <el-skeleton-item class="rounded-full w-100% h-20px" />
              </el-col>
              <el-col :span="6" class="m-r-3px">
                <el-skeleton-item class="rounded-full w-100% h-20px" />
              </el-col>
              <el-col :span="3">
                <el-skeleton-item class="rounded-full w-100% h-20px" />
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="7" class="m-r-3px">
                <el-skeleton-item class="rounded-full w-100% h-20px" />
              </el-col>
              <el-col :span="8" class="m-r-3px">
                <el-skeleton-item class="rounded-full w-100% h-20px" />
              </el-col>
              <el-col :span="3" class="m-r-3px">
                <el-skeleton-item class="rounded-full w-100% h-20px" />
              </el-col>
              <el-col :span="5">
                <el-skeleton-item class="rounded-full w-100% h-20px" />
              </el-col>
            </el-row>
          </template>
        </el-skeleton>
      </div>
      <!-- 骨架屏 End --> 
    </div>
  </div>
  <!-- 文章标签 End -->
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { koiMsgWarning, koiNoticeError } from "@/utils/koi.ts";
import { listTag } from "@/api/blog/tag/index.ts";

const tagList = ref<any>([]);

onMounted(() => {
  handleTagData();
});

/** 获取文章标签数据 */
const handleTagData = async () => {
  try {
    tagList.value = [];
    const res: any = await listTag();
    console.log("文章标签数据->", res.data);
    tagList.value = res.data;
  } catch (error) {
    console.log(error);
    koiNoticeError("数据查询失败，请刷新重试🌻");
  }
};

/** 跳转文章 */
const handleArticleTag = (tagId: any) => {
  if (tagId) {
    console.log("标签ID->", tagId);
    window.open(`/article/full/${tagId}/tag`, "_blank");
  } else {
    koiMsgWarning("未获取文章参数，请刷新页面重试");
  }
};
</script>

<style scoped></style>
